<template>
    <el-dialog class="dialog" v-model="$store.state.userManage.userManageNewDialog">
        <template #header>
            <span class="font-size-20px">新增用户</span>
        </template>
        <el-form :rules="rules" :model="formData">
            <el-form-item label="姓名" prop="name">
                <el-input  placeholder="请输入姓名" v-model="formData.name"/>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input  placeholder="请输入年龄" v-model="formData.age"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select  placeholder="请输入性别" v-model="formData.sex">
                    <el-option label="男" value="0" />
                    <el-option label="女" value="1" />
                </el-select>
            </el-form-item >
            <el-form-item label="日期" prop="birthDate">
                <el-date-picker
                    type="date"
                    placeholder="请输入日期"
                    clearable
                    v-model="formData.birthDate"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input  placeholder="请输入地址" v-model="formData.address"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="$store.commit('userManage/newTableData', false)">取消</el-button>
            <el-button type="primary" @click="handleAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import { useStore } from 'vuex'
import { addTableData, getTableData } from '@/api/userManage.js'
import { ElMessage } from 'element-plus'
const store = useStore()
//表单数据
const formData = ref({
    name: '',
    age: '',
    sex: '',
    birthDate: '',
    address: ''
})

//传给父组件一个函数刷新页面 
const emit = defineEmits(['refreshPage'])
const refresh = ()=>{
    emit('refreshPage' ,'刷新页面')
}
//添加表单数据
const handleAddData = async ()=>{
    const res = await addTableData(formData.value)
    if(res.data.success){
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        formData.value = {}
        store.commit('userManage/newTableData',false)
    }
}
//调用两个函数
const handleAdd = ()=>{
    handleAddData()
    refresh()
}
//表单验证
const rules = ref({
    name: [
        { required: true, message: '请输入名字', trigger: 'blur' },
    ],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '请输入性别', trigger: 'blur' },
    ],
    birthDate: [
        { required: true, message: '请输入出生日期', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入地址', trigger: 'blur' },
    ],
})
</script>
<style scoped lang="less">
.dialog{
    width: 100%;
    .el-form{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item{
            width: 49%;
            :deep(.el-input){
                width: 270px
            }
            :deep(.el-select){
                width: 270px
            }
        }
    }
}
</style>